<template>
  <el-card>
    <el-form label-width="120px" :model="formData" :rules="formRules" ref="addForm">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="基本信息" name="first">
          <el-form-item label="一级分类" prop="first_cateid">
            <el-select v-model="formData.first_cateid" @change="firstCateChange">
              <el-option value label="请选择"></el-option>
              <el-option v-for="item in catesList" :key="item.id" :value="item.id" :label="item.catename"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="二级分类" prop="second_cateid">
            <el-select v-model="formData.second_cateid">
              <el-option value label="请选择"></el-option>
              <el-option v-for="item in secondCates" :key="item.id" :value="item.id" :label="item.catename"></el-option>
            </el-select>
          </el-form-item>
           <el-form-item label="商品名称" prop="goodsname">
            <el-input placeholder="商品名称" v-model="formData.goodsname"></el-input>
          </el-form-item>
          <el-form-item label="商品价格" prop="price">
            <el-input placeholder="商品价格" v-model="formData.price"></el-input>
          </el-form-item>
          <el-form-item label="市场价格" prop="market_price">
            <el-input placeholder="市场价格" v-model="formData.market_price"></el-input>
          </el-form-item>
          <el-form-item label="商品图片" prop="img">
            <el-upload
              action="#"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              :auto-upload="false"
              :on-change="fileChange"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt />
            </el-dialog>
          </el-form-item>
          <el-form-item label="商品规格" prop="specsid">
            <el-select v-model="formData.specsid" @change="specsChange">
              <el-option value label="请选择"></el-option>
              <el-option v-for="item in specsList" :key="item.id"  :value="item.id" :label="item.specsname"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="规格属性值" prop="specsattr">
            <el-select v-model="formData.specsattr" multiple >
              <el-option value label="请选择"></el-option>
              <el-option v-for="(item,index) in specsValueList" :key="index" :value="item" :label="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否新品" prop="isnew">
            <el-radio-group v-model="formData.isnew">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="是否热卖" prop="ishot">
            <el-radio-group v-model="formData.ishot">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-radio-group v-model="formData.status">
              <el-radio :label="1">正常</el-radio>
              <el-radio :label="2">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="商品介绍" name="second">
          <vue-wangeditor ref="wangeditor" id="editor" v-model="formData.description"></vue-wangeditor>
        </el-tab-pane>
      </el-tabs>
      <el-form-item> 
        <el-button type="primary" @click="submitForm('addForm')">立即提交</el-button>
        <el-button type="primary" @click="resetForm('addForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
// 引入vue-wangeditor
import vueWangeditor from "vue-wangeditor";
export default {
  components: { vueWangeditor },
  data() {
    return {
      // tabs标签页控制属性
      activeName: "first",
      //   图片上传组件控制属性
      dialogImageUrl: "",
      dialogVisible: false,
      // 表单数据模型
      formData: {
        first_cateid: "",
        second_cateid: "",
        goodsname: "",
        price: "",
        market_price: "",
        isnew: 0,
        ishot: 0,
        status: 1,
        img: "",
        specsid: "",
        specsattr: [],
        description: ""
      },
      //  表单校验规则
      formRules: {
        first_cateid: { required: true, message: "请选择", trigger: "blur" },
        second_cateid: { required: true, message: "请选择", trigger: "blur" },
        specsid: { required: true, message: "请选择", trigger: "blur" },
        specsattr: { required: true, message: "请选择", trigger: "blur" },
        goodsname: { required: true, message: "请填写", trigger: "blur" },
        price: { required: true, message: "请填写", trigger: "blur" },
        market_price: { required: true, message: "请填写", trigger: "blur" },
        isnew: { required: true, message: "请选择", trigger: "blur" },
        ishot: { required: true, message: "请选择", trigger: "blur" },
        status: { required: true, message: "请选择", trigger: "blur" }
      },
    //   商品分类树形数组
      catesList:[],
    //   对应的二级分类
      secondCates:[],
    //   商品规格列表
    specsList:[],
    // 商品规格可选属性
    specsValueList:[] 
    };
  },
  methods: {
    //   tabs标签页
    handleClick() {},
    // 图片上传组件
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 监听上传文件的改变
    fileChange(file){
        // 将图片文件的原始信息赋值给表单数据模型的img属性
        this.formData.img=file.raw;
    },
    // 获取商品分类
    async getCates(){
        const res=await this.$http.get('/api/catelist?istree=1');
        if(res.code==200){
            this.catesList=res.list;
        }    

    },
    // 监听一级分类的变化
    firstCateChange(id){
        // 通过一级分类id查找对应的二级分类
        const index=this.catesList.findIndex(item=>item.id==id);
        // 对应的二级分类信息
        this.secondCates=this.catesList[index].children;
    },
    // 获取商品规格
    async getspecs(){
        const res=await this.$http.get('/api/specslist');
        this.specsList=res.list;
    },
    // 监听商品规格的改变
    async specsChange(id){
        // 清空之前的规格可选值
        this.formData.specsattr=[];
        // 获取商品规格对应的可选值
       const res=await this.$http.get('/api/specsinfo',{params:{id}});
       this.specsValueList=res.list[0].attrs;
    },
    // 表单提交
    submitForm(form){
        this.$refs[form].validate(async valid=>{
            if(valid){
                // 整理数据, 提交给数据接口
                // {}=>FormData
                // 获取富文本编辑器的内容
                this.formData.description=this.$refs['wangeditor'].getHtml();
                const fd=new FormData();
                for(let key in this.formData){
                    fd.append(key,this.formData[key]);
                }
                const res=await this.$http.post('/api/goodsadd',fd);
                if(res.code==200){
                    this.$success('提交成功');
                    // 重置表单
                    this.$refs[form].resetFields();
                }else{
                    this.$error('提交失败');
                }
            }
        });
    },
    // 表单重置
    resetForm(form){
        this.$refs[form].resetForm();
    }
  },
  created(){
      this.getCates();
      this.getspecs();
  }
};
</script>

<style>
</style>